﻿@model Urs.Admin.Models.Home.CommonStatisticsModel

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    用户数
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">@Model.NumberOfUsers</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    退货数
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">@Model.NumberOfPendingAfterSales</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    订单数
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">@Model.NumberOfOrders</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    低库存
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">@Model.NumberOfLowStockGoodss</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm12">
            <div class="layui-card">
                <div class="layui-card-header">
                    用户数
                    <div class="layui-btn-group layuiadmin-btn-group">
                        <button class="layui-btn layui-btn-primary layui-btn-xs layuiadmin-btn-tags" data-type="week">周</button>
                        <button class="layui-btn layui-btn-primary layui-btn-xs layuiadmin-btn-tags" data-type="month">月</button>
                        <button class="layui-btn layui-btn-primary layui-btn-xs layuiadmin-btn-tags" data-type="year">年</button>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row">
                        <div class="layui-col-sm8">
                            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-pagetwo">
                                <div carousel-item id="LAY-index-pagetwo">
                                    <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-sm4">
                            <div class="layuiadmin-card-list">
                                <p class="layuiadmin-normal-font">日访问数</p>
                                <span>同上期增长</span>
                                <div class="layui-progress layui-progress-big" lay-showPercent="yes">
                                    <div class="layui-progress-bar" lay-percent="30%"></div>
                                </div>
                            </div>
                            <div class="layuiadmin-card-list">
                                <p class="layuiadmin-normal-font">周注册</p>
                                <span>同上期增长</span>
                                <div class="layui-progress layui-progress-big" lay-showPercent="yes">
                                    <div class="layui-progress-bar" lay-percent="20%"></div>
                                </div>
                            </div>
                            <div class="layuiadmin-card-list">
                                <p class="layuiadmin-normal-font">月注册</p>
                                <span>同上期增长</span>
                                <div class="layui-progress layui-progress-big" lay-showPercent="yes">
                                    <div class="layui-progress-bar" lay-percent="25%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm6">
                    <div class="layui-card">
                        <div class="layui-card-header">@T("Admin.SalesReport.Average")</div>
                        <div class="layui-card-body">
                            <div class="layui-tab-item layui-show">
                                <table id="Lay-orderaverage-report" lay-skin="line"></table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6">
                    <div class="layui-card">
                        <div class="layui-card-header">@T("Admin.SalesReport.Incomplete")</div>
                        <div class="layui-card-body">
                            <div class="layui-tab-item layui-show">
                                <table id="LAY-salesreport-prograss" lay-skin="line"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<script>
        layui.use(['index', 'table', 'carousel', 'echarts'], function () {
                var $ = layui.$
                    , table = layui.table
                    , carousel = layui.carousel
                    , echarts = layui.echarts;

                function echartUser(period) {
                    var csLabels = [];
                    var csData = [];

                    $.get('@Url.Action("LoadUserStatistics","User")', { period: period }, function (data) {
                        for (var i = 0; i < data.length; i++) {
                            csLabels.push(data[i].date);
                            csData.push(data[i].value);
                        }
                        var echartsApp = [], options = [
                            {
                                tooltip: {
                                    trigger: 'axis'
                                },
                                calculable: true,
                                legend: {
                                    data: ['用户数']
                                },
                                xAxis: [
                                    {
                                        type: 'category',
                                        data: csLabels
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value',
                                        name: '用户'
                                    }
                                ],
                                series: [
                                    {
                                        name: '访问量',
                                        type: 'line',
                                        data: csData
                                    }
                                ]
                            }
                        ]
                            , elemDataView = $('#LAY-index-pagetwo').children('div')
                            , renderDataView = function (index) {
                                echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
                                echartsApp[index].setOption(options[index]);
                                window.onresize = echartsApp[index].resize;
                            };
                        //没找到DOM，终止执行
                        if (!elemDataView[0]) return;
                        renderDataView(0);
                    });
                }

                echartUser('week');

                 table.render({
                     elem: '#Lay-orderaverage-report'
                    , url: '@Html.Raw(Url.Action("OrderAverageReportList", "Order"))' //模拟接口
                    , cols: [[
                        { type: 'checkbox', fixed: 'left' }
                        , { field: 'OrderStatus', title: '@T("Admin.SalesReport.Average.OrderStatus")' }
                        , { field: 'SumTodayOrders', title: '@T("Admin.SalesReport.Average.SumTodayOrders")' }
                        , { field: 'SumThisWeekOrders', title: '@T("Admin.SalesReport.Average.SumThisWeekOrders")' }
                        , { field: 'SumThisMonthOrders', title: '@T("Admin.SalesReport.Average.SumThisMonthOrders")' }
                        , { field: 'SumThisYearOrders', title: '@T("Admin.SalesReport.Average.SumThisYearOrders")' }
                        , { field: 'SumAllTimeOrders', title: '@T("Admin.SalesReport.Average.SumAllTimeOrders")' }
                    ]]
                    , skin: 'line'
                });

                table.render({
                    elem: '#LAY-salesreport-prograss'
                    , url: '@Html.Raw(Url.Action("OrderIncompleteReportList", "Order"))' //模拟接口
                    , cols: [[
                        { type: 'checkbox', fixed: 'left' }
                        , { field: 'Item', title: '@T("Admin.SalesReport.Incomplete.Item")', minWidth: 100 }
                        , { field: 'Total', title: '@T("Admin.SalesReport.Incomplete.Total")', minWidth:100 }
                        , { field: 'Count', title: '@T("Admin.SalesReport.Incomplete.Count")', minWidth: 100 }
                        , {
                            field: 'Count', title: '详情'
                            , templet: function (d) {
                                return '<a href="' + d.ViewLink+'">@T("Admin.SalesReport.Incomplete.View")</a>'
                            }
                        }
                    ]]
                    , skin: 'line'
                });

               var $ = layui.$, active = {
                   week: function () {
                       echartUser('week');
                   },
                   month: function () {
                       echartUser('month');
                   },
                   year: function () {
                       echartUser('year');
                   }
            }
            $('.layui-btn.layuiadmin-btn-tags').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

      });
</script>